/* Space out content a bit */
body {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Everything but the jumbotron gets side spacing for mobile-first views */
.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

/* Custom row padding */
div.row {
    padding-top: 20px;
}

/* make the results disappear at the beginning */
.protocol_construction, .hide, .hide_bob, .result1, .result2, .result3, .result4 {
    display:none;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Custom container */
.container-narrow {
  margin: 0 auto;
  max-width: 700px;
}

.container-narrow > hr {
  margin: 30px 0;
}

.centered {
    text-align:center;
}

/** main page **/
.intro-heading {
    font-size: 20px;
}

.intro-text {
    font-size: 16px;
}

.pict img {
    max-width:100%;
}

/** crypto game page **/

.picture-side {
    width:23%;
    padding:5%;
}

.picture-side img {
    max-width:82%;
}

.left {
    position:absolute;
    left:0;
    top:0;
}

.right {
    position:absolute;
    right:0;
    top:0;
}

/** for displaying photons **/
#photons img {
    width:50px;
    padding:5px 10px 5px 10px;   
    
}

#photons .rotate90 {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg) translateY(-100%);
}
#photons .rotate45 {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg) translateX(-100%,-100%);
}
#photons .rotate135 {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg) translateX(-100%);
}

/** for constructor **/
#canvas {
    width:100%;
    height:400px; 
    background: url("../img/back.jpg") repeat;  
}

*[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
  position:absolute;
}

*:-khtml-drag {
  background-color: rgba(238,238,238, 0.5);
}

.elements ul li {
  list-style: none;
    width: 120px;
    min-height: 70px;
    padding: 0 0 5px;
    margin: 0;
}

li img {
  text-decoration: none;
  color: #000;
  margin: 10px;
  width: 150px;
  border: 3px dashed #999;
  background: #eee;
  padding: 10px;
  display: block;
}

.elements.left {
    right: 0;   
}

.elements.left ul {
    position: relative;
    width: 130px;
    left: 35%;
    margin-top: 110px;
    padding: 0; 
    padding: 0 0 10px;
    border: #c2c2c2 3px dashed;
    min-height: 395px; 
    text-align:center; 
}

.elements.right {
    left: 70px;
}

.elements.right ul {
    position: relative;
    width: 130px;
    margin-left: 0px;
    margin-top: 110px;
    padding: 0 0 10px;
    border: #c2c2c2 3px dashed;
    min-height: 395px;
}

li.over {
  border-color: #333;
  background: #ccc;
}

#canvas.over {
    border: 2px #2c2c2c dashed;
}

#top-panel {
    min-height:60px; 
    margin-bottom:0;
    padding-left: 25px;
    border: #c2c2c2 3px dashed;   
}

#top-panel li {
    list-style: none;
    display: inline-block;
    float: left;
    width: 150px;
    height: 35px;
    margin-right: 10px;
}

#top-panel li img {
    height:35px;
}


#bottom-panel {
    min-height:60px; 
    border: #c2c2c2 3px dashed;   
}

#bottom-panel li {
    list-style: none;
    display: inline-block;
    float: left;
    width: 150px;
    height: 35px;
    margin-right: 10px;
}

#bottom-panel li img {
    height: 35px;
}

.picture-side img.coupler {
    height: 90px;
    width: 50px;
    margin-left: 35px;   
}

